import Taro, { Component, Config } from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import './index.scss'
import { getAddressList, addAddress, delAddressInfo, setDefaultAddress } from '@/api/userApi'
import { toAddressInfoPage } from '@/utils/page_router'
import {EmptyData, Loading} from '@/components/index'

export default class Index extends Component {
  state: any
  config: Config = {
    navigationBarTitleText: '收货地址'
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      addressList: []
    }
  }

  componentDidShow() {
    this.getList()
  }

  //  获取收货地址
  getList() {
    getAddressList().then(res => {
      this.setState({
        loading: false,
        addressList: res.data
      })
    })
  }

  //  地址信息
  toAddressInfo(i) {
    toAddressInfoPage(i)
  }

  //  导入微信地址
  onChooseAddress() {
    Taro.chooseAddress().then(res => {
      Taro.showLoading({title: '加载中', mask: true})
      addAddress({
        name: res.userName,
        telephone: res.telNumber,
        city: `${res.provinceName},${res.cityName},${res.countyName}`,
        cityCode: res.nationalCode,
        detail: res.detailInfo
      }).then(() => {
        Taro.hideLoading()
        Taro.showToast({icon: 'success', title: '导入成功', mask: true})
        this.getList()
      })
    })
  }

  //  设置默认
  onClickDft(i) {
    // const { addressList } = this.state
    if (!i.isDefault) {
      Taro.showLoading({title: '加载中', mask: true})
      setDefaultAddress({ id: i.id }).then(() => {
        Taro.hideLoading()
        this.getList()
      })
    }
  }

  //  删除地址
  delInfo(id) {
    Taro.showLoading({title: '加载中', mask: true})
    delAddressInfo(id).then(() => {
      Taro.hideLoading()
      Taro.showToast({icon: 'success', title: '删除成功', mask: true})
      this.getList()
    })
  }

  render() {
    const { loading, addressList } = this.state
    return (<View className='address-list-page'>
      {loading && <Loading isCover/>}
      <ScrollView className='address-scroll'>
        <View className='address-list'>
          {addressList.map(i => {
            return (<View key={i.id} className='address-item'>
              <View className='address-body thin-border__b'>
                <View className='user-info d-f a-i-b'>
                  <View className='user-name'>{i.name}</View>
                  <View className='user-phone'>{i.telephone}</View>
                </View>
                <View className='address-info d-f f-d-c'>
                  <View className='address-text'>{i.city}</View>
                  <View className='detail-info'>{i.detail}</View>
                </View>
              </View>
              <View className='address-foot d-f j-c-b'>
                <View className='d-f a-i-c' onClick={this.onClickDft.bind(this, i)}>
                  <View className='goods-checkbox d-f a-s-c'>
                    {i.isDefault ? (<View className='bnn-icon unchecked-icon check-icon'>&#xe645;</View>) : (<View className='unchecked-icon'/>)}
                  </View>
                  <View className='m-l-20'>设置为默认地址</View>
                </View>
                <View className='operate-box d-f'>
                  <View className='operate-item' onClick={this.toAddressInfo.bind(this, i.id)}>
                    <View className='operate-icon bnn-icon'>&#xe649;</View>
                    <View className='operate-name'>编辑</View>
                  </View>
                  <View className='operate-item' onClick={this.delInfo.bind(this, i.id)}>
                    <View className='operate-icon bnn-icon'>&#xe6b4;</View>
                    <View className='operate-name'>删除</View>
                  </View>
                </View>
              </View>
            </View>)
          })}
        </View>
        {!addressList.length && <View className='list-empty h-p-100'><EmptyData/></View>}

        <View className='float-box--height'/>
        <View className='fy-popup fy-popup--bottom float-box d-f a-i-c j-c-b'>
          <View className='btn-box f-g-5 xf-btn xf-btn-round xf-btn-primary' onClick={this.toAddressInfo.bind(this, '')}>添加新地址</View>
          {/*<View className='btn-box import-btn f-g-5 thin-border' onClick={this.onChooseAddress.bind(this)}>导入微信地址</View>*/}
        </View>
        {/*<View className='bottom-box--height'/>*/}
        {/*<View className='bottom-box d-f a-i-c fy-popup fy-popup--bottom'>*/}
        {/*  <View className='btn-box d-f a-i-c'>*/}
        {/*    <View className='btn-item f-g-5' hoverClass='hover-class--btn' onClick={this.toAddressInfo.bind(this, '')}>*/}
        {/*      <View className='btn-icon'/>*/}
        {/*      <View className='btn-text'>添加新地址</View>*/}
        {/*    </View>*/}
        {/*    <View className='btn-item f-g-5' hoverClass='hover-class--btn' onClick={this.onChooseAddress.bind(this)}>*/}
        {/*      <View className='btn-icon'/>*/}
        {/*      <View className='btn-text'>导入微信地址</View>*/}
        {/*    </View>*/}
        {/*  </View>*/}
        {/*</View>*/}
      </ScrollView>
    </View>)
  }
}
